<template>
  <div>
    <div class="brand-list">
      <div class="brand-item">
        <el-button
          class="ml-10 mb-10"
          :type="item.id === value ? 'danger' : ''"
          v-for="item in brandList"
          :key="item.id"
          @click="handleClick(item.id)"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
    <span v-if="!brandList.length">暂无</span>
  </div>
</template>

<script>
export default {
  name: 'SelectBrand',
  props: {
    value: [Number, String]
  },
  data() {
    return {
      currentId: '',
      // 品牌列表
      brandList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取品牌列表
    this.getBrandList()
  },
  mounted() {},
  methods: {
    // 获取品牌列表
    async getBrandList() {
      try {
        const { data } = await this.$http.goods.brand.list()
        this.brandList = data.filter(item => {
          return item.isShow
        })
      } catch (error) {
        console.log('getBrandList', error)
      }
    },

    handleClick(id) {
      this.currentId = id
      this.$emit('input', id)
    }
  }
}
</script>

<style lang="scss" scoped></style>
